<template>
  <BottomDialog :is-show="props.isShow">
    <template #prepend-icon>
      <p
        class="text-primary line-height-140 text-primary text-size-14 font-weight-500 font-style-normal"
        @click="toLogin"
      >
        {{ $t('label.login') }}
      </p>
    </template>
    <template #title>
      <p class="text-center text-white font-size-16 font-weight-500 line-height-140 font-style-normal">
        {{ $t('label.register') }}
      </p>
    </template>
    <template #append-icon>
      <slot name="append-icon"></slot>
    </template>
    <template #body>
      <div class="gap-col-20">
        <div class="gap-col-16">
          <InputWrap
            v-model="form.account.value"
            :err-msg="form.account.error"
            :label="$t('label.account')"
            :placeholder="$t('placeholder.account')"
            :append-icon="accountAppendIcon"
            :disabled="disabled"
            trim
            @blur="checkAccount"
          ></InputWrap>
          <InputWrap
            v-model="form.email.value"
            :err-msg="form.email.error"
            :label="$t('label.email')"
            :placeholder="$t('placeholder.email')"
            :append-icon="emailAppendIcon"
            :disabled="disabled"
            trim
            @blur="checkEmail"
          ></InputWrap>
          <InputWrap
            v-model="form.password.value"
            :label="$t('label.password')"
            :placeholder="$t('placeholder.password')"
            :err-msg="form.password.error"
            :disabled="disabled"
            password
          ></InputWrap>
          <div class="text-graydisabled font-size-12 font-style-normal font-weight-500 line-height-120">
            {{ $t('document.register.line1') }}
            <span class="text-primary font-weight-500 line-height-120 pointer" @click="openTermsOfService">
              {{ $t('document.register.line2') }}
            </span>
            {{ $t('document.register.line3') }}
            <span class="text-primary font-weight-500 line-height-120 pointer" @click="openPrivacyPolicy">
              {{ $t('document.register.line4') }}
            </span>
          </div>
        </div>
        <BlockButton
          :label="$t('common.completeRegister')"
          :disabled="disabled"
          :is-gradient="false"
          @click="onConfirm()"
        ></BlockButton>
        <div v-if="signUpErrMsg" class="text-start err-msg font-size-14 font-weight-400 line-height-120 text-primary-x">
          {{ signUpErrMsg }}
        </div>
      </div>
    </template>
  </BottomDialog>
</template>
<script setup>
import { onKeyStroke } from '@vueuse/core'
import { useAuthRouteStore } from '@/store/auth-route'
import { usePopupDialogStore } from '@/store/popup-dialog'
import { $t } from '@/i18n'
import { AUTH_ROUTES, POPUP_DIALOG_TYPE } from '@const'
import BlockButton from '@/components/button/BlockButton.vue'
import BottomDialog from '@/components/dialogs/BottomDialog.vue'
import InputWrap from '@/components/form/InputWrap.vue'
import { useSignUp } from '@/compositions/auth/signUp'

const props = defineProps({
  isShow: {
    type: Boolean,
    default: false,
  },
})

const { $popupDialog } = usePopupDialogStore()

const openPrivacyPolicy = () => {
  $popupDialog(POPUP_DIALOG_TYPE.PRIVACY_POLICY, {
    title: $t('title.pp'),
    confirm: () => {},
  }).open()
}

const openTermsOfService = () => {
  $popupDialog(POPUP_DIALOG_TYPE.TERMS_OF_SERVICE, {
    title: $t('title.tos'),
    confirm: () => {},
  }).open()
}

const { to } = useAuthRouteStore()
const toLogin = () => to(AUTH_ROUTES.LOGIN)

const { form, accountAppendIcon, emailAppendIcon, disabled, signUpErrMsg, checkAccount, checkEmail, onConfirm } =
  useSignUp()

onKeyStroke('Enter', onConfirm)
</script>
